withRouter

首先该方法是从"react-router"导入的。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route} from 'react-router-dom';

class Home extends React.Component{
    render(){
        return(
            <div>
                <HomeChild />
            </div>
        )
    }
}
class HomeChild extends React.Component{
    render(){
        return(
            <div>
                {JSON.stringify(this.props)}
            </div>
        )
    }
}
class MyApp extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Route path="/" component={Home} />
                </div>
            </Router>
        );
    }
}
ReactDOM.render(<Home/>,document.querySelector("#root"));

Home组件是可以获取到路由属性的，但是HomeChild就无法获取到了，虽然可以以props参数的方式传递下去，但如果层级很多，就非常麻烦了。

这个时候withRouter就派上用场了。

import {withRouter} from 'react-router';
class Home extends React.Component{
    render(){
        return(
            <div>
                <WithHomeChild/>
            </div>
        )
    }
}
class HomeChild extends React.Component{
    render(){
        return(
            <div>
                {JSON.stringify(this.props)}
            </div>
        )
    }
}
const WithHomeChild = withRouter(HomeChild);

这样子，用withRouter重新包装HomeChild组件，返回一个新的组件，该组件就可以读取到路由信息了。